// -------- 圆角矩形 -----------------------
.ix-border {
  .round(@color, @radius) {
    border: solid 1px @color;
    border-radius: unit(@radius, px);
  }
  .round(@color, @radius, @bg) {
    border: solid 1px @color;
    border-radius: unit(@radius, px);
    background-color: @bg;
  }

  .radius(@radius, @bg) {
    border-radius: unit(@radius, px);
    background-color: @bg;
  }
}

// -------- 背景 -----------------------
.ix-bg {
  .trans-h(@height) {
    height: unit(@height, px);
    background: transparent;
  }
  .w(@width, @color) {
    width: @width;
    background-color: @color;
  }
  .color(@color, @bg-color) {
    color: @color;
    background-color: @bg-color;
  }
  .gradient-ll(@color, @end) {
    background: -moz-linear-gradient(left, @color 0%, white @end);
    background: -webkit-linear-gradient(left, @color 0%, white @end);
    background: -o-linear-gradient(left, @color 0%, white @end);
    background: -ms-linear-gradient(left, @color 0%, white @end);
    background: linear-gradient(to right, @color 0%, white @end);
  }
  .gradient-lr(@color, @end) {
    background: -moz-linear-gradient(right, @color 0%, white @end);
    background: -webkit-linear-gradient(right, @color 0%, white @end);
    background: -o-linear-gradient(right, @color 0%, white @end);
    background: -ms-linear-gradient(right, @color 0%, white @end);
    background: linear-gradient(to left, @color 0%, white @end);
  }
}

// -------- 位置 -----------------------
.ix-pos {
  .fixed(@z-index) {
    position: fixed;
    z-index: @z-index;
  }
  .absolute(@z-index) {
    position: absolute;
    z-index: @z-index;
  }
  .relative(@z-index) {
    position: relative;
    z-index: @z-index;
  }
}

// -------- 盒模型 -----------------------
.ix-box {
  .in(@padding) {
    padding: @padding;
  }
  .x-in(@padding) {
    padding: @padding !important;
  }
  .in(@padding, @width) {
    padding: @padding;
    width: @width;
  }
  .in-v(@top, @bottom) {
    padding-top: unit(@top, px);
    padding-bottom: unit(@bottom, px);
  }
  .out(@margin) {
    margin: @margin;
  }
  .out(@margin, @width) {
    margin: @margin;
    width: @width;
  }
  .square(@width) {
    height: @width;
    width: @width;
    line-height: @width;
  }
  .rect(@height, @width) {
    height: @height;
    width: @width;
  }
  .shadow(@size, @color) {
    box-shadow: @size @size @size @color;
  }
}

// -------- 字体 -----------------------
.ix-font {
  .bold(@size) {
    font-size: unit(@size, px);
    font-weight: 700;
  }
  .bold(@size, @color) {
    font-size: unit(@size, px);
    font-weight: 700;
    color: @color;
  }
  .thin(@size) {
    font-size: unit(@size, px);
    font-weight: 100;
  }
  .thin(@size, @color) {
    font-size: unit(@size, px);
    font-weight: 100;
    color: @color;
  }
  .normal(@size) {
    font-size: unit(@size, px);
    font-weight: 400;
  }
  .normal(@size, @color) {
    font-size: unit(@size, px);
    font-weight: 400;
    color: @color;
  }
  .line(@height) {
    height: unit(@height, px);
    line-height: unit(@height, px);
  }
  .x-line(@height) {
    height: unit(@height, px) !important;
    line-height: unit(@height, px) !important;
  }
  .line(@height, @color) {
    height: unit(@height, px);
    line-height: unit(@height, px);
    color: @color;
  }
  .size(@height, @color) {
    font-size: unit(@height, px);
    line-height: unit(@height, px);
    color: @color
  }
  .size(@height) {
    font-size: unit(@height, px);
    line-height: unit(@height, px);
  }
}